import { useState, useEffect } from 'react';
import { useWindowSize } from './hooks/useWindowSize';
import './App.css';

function App() {
  console.log('render app');

  const [count, setCount] = useState(1);
  const [total, setTotal] = useState(0);

  /**
   * useEffect(effectFn, deps)
   * useEffect Hook 相当于 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
   * 可以模拟渲染后、更新后、销毁三个动作。
   */

  useEffect(() => {
    console.log('useEffect');
    // deps 传入空数组，只会在第一次渲染的时候执行，不会在之后的更新中执行。
    // 相当于 componentDidMount
  }, []);

  useEffect(() => {
    document.title = `React 后台课程`;
    console.log('useEffect, deps 没有参数');
    // deps 没有参数时，当状态发生变化会再次执行。
    // 相当于每次 render重新渲染的时候，useEffect 都会执行
  });

  useEffect(() => {
    console.log('useEffect, deps 传入 count');
    setTotal(count * 5);
    // deps 传入 count，只有当 count 发生变化时，才会执行。
    // 相当于 componentDidUpdate
  }, [count]);

  useEffect(() => {
    const T = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
    return () => {
      clearInterval(T);
      console.log('useEffect, deps 传入 count, return');
      // 相当于 componentWillUnmount
    };
  }, []);

  const handleChangeCount = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  // 自定义hooks
  const [size] = useWindowSize();
  return (
    <>
      <div className='card'>
        <span style={{ marginRight: 20 }}>count is {count}</span>
        <span style={{ marginRight: 20 }}>total is {total}</span>
        <br />
        <button onClick={handleChangeCount}>直接修改Count</button>
        <br />
        <div>
          window width: {size.width}，height: {size.height}
        </div>
      </div>
    </>
  );
}

export default App;
